<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
    <style>
        .breadcrumb {
            padding: 15px 15px;
            background-color: transparent;
            margin-bottom: 0px;
            display: inline-block;
        }

        .pull-right {
            padding-top: 7px;
        }

        .inline-block {
            display: inline-block;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <form class="form-inline inline-block">
                <div class="form-group">
                    <input type="text" name="name" class="form-control input-sm" placeholder="书本">
                </div>
                <div class="form-group">
                    <input type="number" name="minPrice" class="form-control input-sm" placeholder="最低价">
                </div>
                <div class="form-group">
                    <input type="number" name="maxPrice" class="form-control input-sm" placeholder="最高价">
                </div>
                <button type="button" onclick="search(this)" class="btn btn-default btn-sm">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
            </form>
            <div class="inline-block" style="float: right;">
                <button type="button" onclick="insert(event)" class="btn btn-success">添加</button>
                <button type="button" onclick="delBatch(event)" class="btn btn-success">批量删除</button>
            </div>
        </div>
        <div class="panel-body">
            <div id="table_div">

            </div>
            <nav class="row">
                <div id="page_total" class="col-md-2 col-sm-2" style="line-height: 79.6px;">当前一个多少条记录</div>
                <div class="col-md-8 col-sm-8 text-center">
                    <ul class="pagination">
                    </ul>
                </div>
                <div class="col-md-2 col-sm-2" style="margin: 20px 0">
                    <select id="page_select">
                        <option>2</option>
                        <option>5</option>
                        <option>10</option>
                    </select>
                </div>
            </nav>
        </div>
        <div class="panel-footer"><span id="total_price"></span></div>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--bootstrap的JS是需要Jquery的支持-->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
<script src="../js/41-书本商城购物车-JS实现二.js"></script>
</body>
</html>